<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>前端开发课程设计</title>
        <script src="js/bootstrap.bundle.js"></script>
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/mycss.css">
        <link rel="stylesheet" href="css/font-awesome.css">
    </head>
        <style>
            body{
                margin: 0;
                padding: 0;
                background-image: url("https://ts1.cn.mm.bing.net/th/id/R-C.5723aa4f84b9683993c6727b8a2c0e7b?rik=KXiUvkFVoM4jBg&riu=http%3a%2f%2fwww.jdxzz.com%2fuploads%2fallimg%2f191024%2f4-191024155440.jpg&ehk=oOxG6F0nJNDRz%2boYb5KPbJfUb%2bWWtJaE6npMwiRN3wc%3d&risl=&pid=ImgRaw&r=0");
                background-size: cover;
                background-repeat: no-repeat;
                background-attachment: fixed;
            }
            .title{
                font-size: 48px;
                text-align: center;
                letter-spacing: 16px;
                color: #452f2f;
            }
            .box{
                margin: auto;
                width: 170px;
                height: 160px;
            }
            .image{
                border-radius: 100%;
                display: inline-block;
                vertical-align: middle;
                width: 40px;
                height: 40px;
            }
            .btn-box{
                margin: auto;
                width: 250px;
                height: 30px;
            }
            #btn-left{
                float: left;
            }
            #btn-right{
                float: right;
            }
            div.row-msg{
                display: flex;
            }
            div.row-msg>p{
                color: #452f2f;
            }
            div.row-msg>.left{
                text-align: left;
            }
            div.row-msg>.right{
                margin-left: 30px;
                text-align: left;
            }
        </style>
    <body>
        <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%)">
            <h1 class="title" >前端开发课程设计</h1>

        <div class="box">
            <div class="row-msg">
                <p class="left">班级</p>
                <p class="right">20214124</p>
            </div>
            <div class="row-msg">
                <p class="left">学号</p>
                <p class="right">2021493417</p>
            </div>
            <div class="row-msg">
                <p class="left">姓名</p>
                <p class="right">江振杨</p>
            </div>
            <div class="row-msg">
                <p class="left">头像</p>
                <p class="right"><img src="/image/头像.png" alt="" class="image" ></p>
            </div>
        </div>

        </br>
        <div class="btn-box">
            <button id="btn-left" class="btn btn-success" onclick="location.href='home_index/huijiawang.html'">回家网</button>
            <button id="btn-right" class="btn btn-success" onclick="location.href='home_index/huijiawang.html'">一卡通管理系统</button>
        </div>
        </div>

    </body>
</html>